import React from 'react';
import PageScaffold from './PageScaffold';
import { getChipsWithPrimary } from '../utils/chipConfig';

export default function ReactionDiffusionRegion() {
  const chips = getChipsWithPrimary('反应-扩散', '/reaction-diffusion-region');

  return (
    <PageScaffold
      chips={chips}
      left={(
        <div>
          <h2 style={{ marginTop: 0, marginBottom: 20 }}>反应-扩散</h2>
          <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
            <button style={{ padding: '8px 16px', border: 'none', background: '#2b8a6e', color: 'white', borderRadius: 8, fontWeight: 500 }}>区域</button>
            <button style={{ padding: '8px 16px', border: 'none', background: 'transparent', color: '#6b7280', borderRadius: 8 }}>种类</button>
            <button style={{ padding: '8px 16px', border: 'none', background: 'transparent', color: '#6b7280', borderRadius: 8 }}>状态</button>
            <button style={{ padding: '8px 16px', border: 'none', background: 'transparent', color: '#6b7280', borderRadius: 8 }}>参数</button>
            <button style={{ padding: '8px 16px', border: 'none', background: 'transparent', color: '#6b7280', borderRadius: 8 }}>反应</button>
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 16 }}>
            <span className="chip-soft">CYT <span style={{ cursor: 'pointer', marginLeft: 8 }}>✕</span></span>
            <span className="chip-soft">ER <span style={{ cursor: 'pointer', marginLeft: 8 }}>✕</span></span>
            <span className="chip-soft">CYT_ER_MEMBRANE <span style={{ cursor: 'pointer', marginLeft: 8 }}>✕</span></span>
            <span className="chip-soft">ECS <span style={{ cursor: 'pointer', marginLeft: 8 }}>✕</span></span>
            <button className="btn-circle">＋</button>
          </div>
          <div className="list">
            <div className="field"><label>细胞</label><div className="input" style={{ background: '#eaf6f2', color: '#256a60', display: 'flex', justifyContent: 'space-between' }}><span>全部</span><span>▾</span></div></div>
            <div className="field"><label>结构域/段</label><div className="input" style={{ background: '#eaf6f2', color: '#256a60', display: 'flex', justifyContent: 'space-between' }}><span>全部</span><span>▾</span></div></div>
            <div className="field"><label>神经元区域</label><div className="input" style={{ display: 'flex', justifyContent: 'space-between' }}><span></span><span>▾</span></div></div>
            <div className="field"><label>维度</label><div className="input" style={{ display: 'flex', justifyContent: 'space-between' }}><span></span><span>▾</span></div></div>
            <div className="field"><label>空间步长</label><div className="input" style={{ display: 'flex', justifyContent: 'space-between' }}><span></span><span>▾</span></div></div>
            <div className="field"><label>几何模型</label><div className="input" style={{ background: '#eaf6f2', color: '#256a60', display: 'flex', justifyContent: 'space-between' }}><span>体积分数模型</span><span>▾</span></div></div>
            <div className="row">
              <div className="input" style={{ flex:1 }}>参数键</div>
              <div className="input" style={{ flex:1 }}>参数值</div>
              <button className="btn-circle">＋</button>
            </div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <span className="chip-soft">参数 体积分数 值: 0.8 <span style={{ cursor: 'pointer', marginLeft: 8 }}>✕</span></span>
              <span className="chip-soft">参数 表面分数 值: 1.0 <span style={{ cursor: 'pointer', marginLeft: 8 }}>✕</span></span>
            </div>
          </div>
        </div>
      )}
      right={(
        <div className="list">
          <div className="switch-item"><span className="switch on" /> 细胞外的</div>
          {['xlo','ylo','zlo','xhi','yhi','zhi'].map(k => (
            <div className="field" key={k}><label>{k}</label><div className="input" /></div>
          ))}
          <div className="field"><label>积体分数</label><div className="input" /></div>
          <div className="field"><label>曲折度</label><div className="input" /></div>
        </div>
      )}
    />
  )
}

